<template>
  <div class="container">
    <!-- 头部 -->
    <div class="header">
      <div class="h-left">
        <div class="choose fs-32" @click="goBack">取消</div>
      </div>
      <div class="h-center">
        <div class="title fs-36">{{title}}</div>
      </div>
      <div class="h-right">
        <div class="close fs-32" @click="saveEdit">完成</div>
      </div>
    </div>
    <!-- 主要部分 -->
    <div class="main-box">
      <div class="items">
        <div class="left fs-32">更换封面</div>
        <div class="right">
          <img :src="photo" alt />
          <input
            type="file"
            ref="avatarInput"
            @change="updataimg($event,3)"
            accept="image/*"
            class="updata-input"
          />
        </div>
      </div>
      <div class="items">
        <div class="left fs-32">名称</div>
        <div class="input-box">
          <input class="fs-32" type="text" placeholder="请输入名称" v-model="name" />
        </div>
      </div>
      <div class="items">
        <div class="left fs-32">标签</div>
        <div class="mes fs-32">
          <input class="fs-32" v-if="tips" type="text" v-model="tips" />
          <span v-else>请选择标签</span>
          <img :src="more" alt class="more" @click="toChooseTip" />
        </div>
      </div>
      <div class="items">
        <div class="left fs-32">描述</div>
        <div class="input-box">
          <input class="fs-32" type="text" placeholder="暂无描述" v-model="desc" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mall",
  data() {
    return {
      title: "编辑歌单",
      more: require("@/assets/index/back-pic.png"),
      name: "",
      desc: "",
      photo: "",
      tips: "",
      sheetId: null, //歌单id
      tipsId:[]
    };
  },
  components: {},
  methods: {
    // 上传图片
    updataimg(e, i) {
      var formdata1 = new FormData(); // 创建form对象
      var file = e.target.files[0];
      var reader = new FileReader();
      var that = this;
      reader.readAsDataURL(file);
      reader.onload = function(e) {
        // if(i==1){
        //     that.userinfo.user_avator = this.result
        // }else if(i==2){
        //     that.userinfo.background_photo=this.result
        // }else if(i==3){
        //     that.userinfo.singer_avator=this.result
        // }
      };
      formdata1.append("file", file);
      let config = {
        headers: { "Content-Type": "multipart/form-data" }
      };
      var url = this.$host1 + `upload_file`;
      this.$axios.post(url, formdata1, config).then(response => {
        console.log(response);
        this.photo = response.data.dest;
        this.$forceUpdate();
      });
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    },
    // 获取歌单的数据
    getSheetData() {
      const url =
        this.$host1 + `home/songSheetMsg?song_sheet_id=` + this.sheetId;
      this.$axios
        .get(url)
        .then(res => {
          // console.log(res.data,'---res.data--');
          if (res.data.code == 200) {
            let data = res.data.data.result;
            this.name = data.song_sheet_name;
            this.photo = data.song_sheet_photo;
            this.tips = data.song_sheet_category_name;
            this.desc = data.song_sheet_content;
            let value = JSON.parse(window.sessionStorage.getItem("tips"));
            let ids = JSON.parse(window.sessionStorage.getItem("tipsId"));
            if (value) {
              this.tips = value;
            }
            if(ids){
              this.tipsId = ids;
            }
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 保存编辑
    saveEdit() {
      console.log(this.name, "----name-");
      console.log(this.desc, "--desc");
      console.log(this.tips, "---tips");
      console.log(this.photo, "---photo");
      const url = this.$host1 + `home/editSongSheet`;
      var params = {
        song_sheet_id: this.sheetId,
        song_sheet_photo: this.photo,
        song_sheet_content: this.desc,
        song_sheet_category_name: this.tipsId,
        song_sheet_name: this.name
      };
      this.$axios
        .post(url, params)
        .then(res => {
          console.log(res.data, "---res.data--");
          if (res.data.code == 200) {
            this.$router.go(-1);
          } else {
            this.AlertWin(res.data.message);
          }
        })
        .catch(err => {
          console.log(err, "err-----");
        });
    },
    // 跳转到选择标签页面
    toChooseTip() {
      this.$router.push({
        path: "/mine/choose-tips",
        query: {}
      });
    }
  },
  created() {
    this.sheetId = this.$route.query.id;
    this.getSheetData();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.container {
  padding-top: 1rem;
  box-sizing: border-box;
  .header {
    width: 100%;
    height: 1rem;
    padding: 0 0.34rem 0 0.31rem;
    box-sizing: border-box;
    background: linear-gradient(to right, #680dae, #9529c6);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .h-left {
      .choose {
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
      }
    }
    .h-center {
      .title {
        font-weight: bold;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
      }
    }
    .h-right {
      .close {
        font-weight: 500;
        color: rgba(255, 255, 255, 1);
        line-height: 0.32rem;
      }
    }
  }

  .main-box {
    background-color: #fff;
    .items {
      padding: 0.2rem 0.23rem;
      height: 1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      border-bottom: 0.015rem solid #e9e9e9;
      .left {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
      }
      .right {
        position: relative;
        width: 0.9rem;
        height: 0.9rem;
        background-color: #efefef;
        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .updata-input {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          opacity: 0;
        }
      }
      .input-box {
        font-weight: 500;
        color: rgba(68, 68, 68, 1);
        input {
          text-align: right;
        }
        input::-webkit-input-placeholder {
          text-align: right;
          font-size: 0.32rem;
          color: #999999;
        }
      }

      .mes {
        font-weight: 500;
        height: 100%;
        color: rgba(153, 153, 153, 1);
        display: flex;
        align-items: center;
        input {
          text-align: right;
          margin-right: 0.25rem;
        }
        input::-webkit-input-placeholder {
          text-align: right;
          font-size: 0.32rem;
          color: #999999;
        }
        span {
          margin-right: 0.25rem;
        }
        img {
          width: 0.24rem;
          height: 0.35rem;
        }
      }
    }
    .items:first-child {
      height: 1.4rem;
    }
  }
}
</style>
